<template>
	<view class="empire-grid">
		<view class="empire-mall__grid">
			<EmpireCard
				v-for="(item, key) in list"
				:key="key"
				:custom-style="{ backgroundColor: '#fff', borderRadius: '24rpx' }"
				:body-style="{
					padding: '20rpx'
				}"
			>
				<EmpireImageVertical
					width="290rpx"
					height="290rpx"
					:src="item.profile"
					:title="item.name"
					to="/pages/category/product-detail"
				>
					<EmpirePrice :discount="item.price"></EmpirePrice>
					<template #description class="empire-mall__flex-between">
						<text>{{ item.total }}人加购</text>
						<view @click.stop="handlePlus(item)">
							<uni-icons ref="plus" type="plus-filled" color="#1BA4F0" size="24"></uni-icons>
						</view>
					</template>
				</EmpireImageVertical>
			</EmpireCard>
		</view>
		<uni-fab
			v-if="false"
			horizontal="right"
			:pattern="{ icon: 'arrow-up', size: '24' }"
			@fabClick="handleMoveToTop"
		></uni-fab>
		<EmpirePrompt v-model="visible" message="已加入购物车"></EmpirePrompt>
		<uni-load-more color="#1BA4F0" :status="statusText" />
	</view>
</template>

<script setup>
import EmpireCard from './empire-card';
import EmpireImageVertical from './empire-image/empire-image-vertical.vue';
import EmpirePrice from './empire-price.vue';
import EmpirePrompt from '@/components/empire-prompt.vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { computed, ref, toRefs } from 'vue';
import { useAppStore } from '@/store/store.js';
import { useAddCart } from '@/common/hooks/useAddCart.js';

const store = useAppStore();
const { shopping } = toRefs(store);
const props = defineProps({
	loading: {
		type: Boolean,
		default: false
	},
	completed: {
		type: Boolean,
		default: false
	},
	list: {
		type: Array,
		default: []
	}
});
const emits = defineEmits(['add', 'click-load-more']);
const visible = ref(false);
const plus = ref();
const startOffset = ref();
const statusText = computed(() => {
	return props.completed ? 'noMore' : props.loading ? 'loading' : 'more';
});
onReachBottom(() => {
	emits('click-load-more');
});

function handlePlus(product) {
	useAddCart(product);
	visible.value = true;
}

function handleMoveToTop() {}
</script>

<style lang="scss" scoped>
.empire-grid {
}
</style>
